<template>
  <div class="chart-container">
    <div class="chart-box">
      <chart
        :x-axis-data="MixLineBarChartsData.xAxisData"
        :series-data="MixLineBarChartsData.seriesData"
        :legend-data="MixLineBarChartsData.legendData"
        height="100%"
        width="100%"
      />
    </div>
  </div>
</template>

<script>
import Chart from '@/components/Charts/mix-line-bar'

export default {
  name: 'MixLineBar',
  components: { Chart },
  data() {
    return {
      MixLineBarChartsData: {
        legendData: ['第一项', '第二项'],
        xAxisData: [],
        seriesData: {
          linData: {
            name: '第一项',
            data: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078]
          },
          barData: {
            name: '第二项',
            data: [656, 959, 4455, 1620, 2320, 3236, 1215, 1886, 2525, 4141, 3333, 2656]
          }
        }
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const data = []
      for (let i = 1; i < 13; i++) {
        data.push(i + 'month')
      }
      this.MixLineBarChartsData.xAxisData = data

      setInterval(() => {
        this.MixLineBarChartsData.seriesData.linData.data.shift()
        this.MixLineBarChartsData.seriesData.barData.data.shift()
        this.MixLineBarChartsData.seriesData.linData.data.push(parseInt(Math.random() * 1000))
        this.MixLineBarChartsData.seriesData.barData.data.push(parseInt(Math.random() * 1000))
      }, 1500)
    }
  }
}
</script>

<style scoped>
.chart-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.chart-box {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 4px;
    background: #fff;
}
</style>

